<template>
    <nav>
      <ul>
        <li 
          v-for="item in navItems" 
          :key="item.path"
          @click="navigateTo(item.path)"
          :class="{ 'active': $route.path === item.path }"
        >
          {{ item.title }}
        </li>
      </ul>
    </nav>
  </template>
  
  <script>
  export default {
    name: 'XSCD',
    data() {
      return {
        navItems: [
          { title: '首页', path: '/home' },
          { title: '在线练习', path: '/zxlx' },
          { title: '在线考试', path: '/zxks' },
          { title: '个人中心', path: '' }
        ]
      }
    },
    methods: {
      navigateTo(path) {
        // 避免重复导航到当前路由
        if (this.$route.path !== path) {
          this.$router.push(path)
        }
      }
    }
  }
  </script>
  
  <style scoped>
  nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    background-color: #ffffff;
    
  }
  
  nav ul li {
    padding: 14px 20px;
    color: #333;
    cursor: pointer;
    font-size: 22px;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
  }
  
  nav ul li:hover {
    background-color: #f5f5f5;
    color: #07a2ec;
  }
  
  nav ul li.active {
    color: #07a2ec;
    border-bottom-color: #07a2ec;
    font-weight: bold;
  }
  </style>